import React, { useImperativeHandle, useRef } from 'react'
// 默认情况下，函数组件不支持ref
// export default function Test() {
//   return <div>Test</div>
// }

// 可以使用React.forwardRef让函数组件支持ref
export default React.forwardRef(function Test(props, appRef) {
  const testRef = useRef()
  // 使用useImperativeHandle这个hook,可以将第二个参数的返回值,添加到appRef.current上面
  useImperativeHandle(appRef, () => ({
    setbgC(color) {
      // 修改div的背景颜色
      testRef.current.style.backgroundColor = color
    },
  }))
  return <div ref={testRef}>Test</div>
})
